<template>
  <div class="main">
    <el-card class="box-card" :body-style="{ padding: '0px' }">
      <template #header>
        <div class="card-header">
          <span>植物管理</span>
          <div>
            <el-button type="primary" icon="plus" plain @click="handleAdd">增加</el-button>
            <el-button type="danger" icon="delete" plain @click="handleDeleteBatch">删除</el-button>
          </div>
        </div>
      </template>
      <div class="main-table">
        <el-table :data="tableData" max-height="450" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="名称" width="70px" property="name" />
          <el-table-column label="阳光" width="80px" property="suns" />
          <el-table-column label="cd" width="80px" property="cd" />
          <el-table-column label="攻击" width="80px" property="atk" />
          <el-table-column label="生命" width="80px" property="hp" />
          <el-table-column label="一次性" width="80px" property="status" />
          <el-table-column label="环境" width="80px" property="env" />
          <el-table-column label="图片" width="140px">
            <template #default="scope">
              <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="fill" />
            </template>
          </el-table-column>
          <el-table-column label="描述" property="description" />
          <el-table-column label="操作" width="160px">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <x-pagination :pagination="pagination" :refresh="refreshPlants"></x-pagination>
    </el-card>
    <x-plant-editor :dialog-visible="dialogVisible" :form="form" :handle-close="handleClose"></x-plant-editor>
  </div>
</template>

<script setup>
import xPagination from "../components/x-pagination.vue";
import XPlantEditor from "../components/x-plant-editor.vue";
import * as XMessage from '../utils/message-utils'
import { listPlants, updatePlant } from "../api/plants";
import { delPlant } from '../api/x-plants'

const dialogVisible = ref(false)
const form = ref({})

const tableData = reactive([]);
const pagination = reactive({
  current: 1,
  size: 5,
  total: 10
})

const handleClose = (form) => {
  dialogVisible.value = false
  if (form === 'cancel') return
  updatePlant(form).then(data => {
    if (data.code == 200) {
      XMessage.success(data.msg)
    } else {
      XMessage.error(data.msg)
    }
  })

}

const handleEdit = (index, row) => {
  dialogVisible.value = true
  Object.assign(form.value, row)
};

const handleDelete = (index, row) => {
  delPlant(row.pid).then(data => {
    if (data.code == 200) {
      XMessage.success(data.msg)
    } else {
      XMessage.error(data.msg)
    }
  })
};

const handleDeleteBatch = () => { };

const handleAdd = () => {
  console.log("add");
};

const handleSelectionChange = (value) => {
  console.log("selection", value);
};

const refreshPlants = () => {
  listPlants(pagination).then(({ data }) => {
    Object.assign(tableData, data.rows)
    pagination.total = parseInt(data.total)
  });
}


onMounted(() => {
  refreshPlants()
})

</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-table,
.main-pagination {
  margin-bottom: 25px;
  overflow: hidden;
}

.main-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>